<template>
	<view class="fullscreen-container" >
		<image :src="imageUrl + '/tansuofaxian2/tansuofaxian2beijing4.png'" mode="" class="fullscreen-image"></image>
		<image :src="imageUrl + '/tansuofaxian2/tansuofaxian2biaoti3.png'" mode="" class="toubu-image"></image>
		<image :src="imageUrl + '/tansuofaxian2/tansuofaxian2juese2.png'" mode="" class="baibian-image"></image>
		<image :src="imageUrl + '/tansuofaxian2/tansuofaxian2duanluo1.png'" mode="" class="yuanlai-image" @click="handleClick"></image>
		<image :src="imageUrl + '/tansuofaxian2/tansuofaxian2duanluo2.png'" mode="" class="shuishang-imgae" @click="handleClick"></image>
		<image :src="imageUrl + '/tansuofaxian2/tansuofaxian2fanhui.png'" mode="" class="fanhui" @click="fanhui"></image>
		<view class="duihuakuang">
			<p class="neir-ziti">看这儿，为水汇入湘江之处，便是我们靖港得天独厚之处。想当年，湘江是我们的生命线，上通武汉，下达长沙，
			水运之便，让这里成了货物的集散地。商人们啊，都爱走水路，成本低，又安全，还能避开官府盘查。</p>
		</view>
		<view class="cxkuang">
			<p class="cx">李伯</p>
		</view>
	</view>
</template>

<script>
import MusicContror from '../../../common/teding.vue'
	import { playBackgroundMusic, pauseBackgroundMusic, pageSpecificMusicManager, isGlobalMusicPlaying, isPageSpecificMusicPaused } from '../../../common/audio';
	export default {
	components: {
	   MusicContror,
	 },
	data(){
		return{
		passedParam3: '',
		imageUrl: this.$imageUrl,	
		}
	},
	onLoad(options) {
	    // 在这里接收传递过来的参数
	    const passedParam = options.fromPage;
	    console.log('接收到的参数：', passedParam);
	    if (passedParam) {
	        this.passedParam3 = passedParam;
			console.log('passedParam3',this.passedParam3);
	    } else {
	        console.log('接收到的参数为空，未进行赋值。');
	    }
	},
	onShow() {
			    // 根据全局变量判断是否播放特定页面音乐
			    if (!isPageSpecificMusicPaused) {
			      pageSpecificMusicManager.playPageSpecificMusic();
			    }
			  },
			  onHide() {
			    // 暂停特定页面音乐并更新全局变量
			    pageSpecificMusicManager.pausePageSpecificMusic();
			    isPageSpecificMusicPaused = true;
			  },
	  methods: {
	    handleClick() {
		console.log('触发了');
		const currentPageParam = this.passedParam3? this.passedParam3 : '';
	      wx.redirectTo({
	     url: `/pages-exploration-discovery/Explore the wisdom of village construction/Page Five?fromPage=${currentPageParam}`
	      });
		  console.log('触发了页面跳转')
	    },
	fanhui() {
		console.log('触发了')
		if (this.passedParam3) {
			console.log('特定跳转')
		    wx.redirectTo({
		        url: `/${this.passedParam3}`
		    });
		} else {
		console.log('默认跳转')
	      wx.redirectTo({
	        url: '/pagesNew/pages-exploration-discovery/index',
	      });
		}
		  pageSpecificMusicManager.pausePageSpecificMusic();
	      // 检查全局音乐是否在播放，如果没有则播放全局音乐
	      if (!isGlobalMusicPlaying) {
	        playBackgroundMusic();
	      }
	    },
	  }
	};
</script>

<style>
	
	.cx{
		font-size: 17px;
		background: -webkit-linear-gradient(#f7edc4, #ffffff);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
	}
	
	.fanhui{
			   width: 25px;
			    height: 25px;
			   position: absolute;
			   z-index: 5;
			   /* transform: rotate(90deg); */
			   /* border: 2px solid pink; */
			   top: 25px; /* 根据需要调整距离第一个图片顶部的距离 */
			   left: 25px; /* 根据需要调整距离第一个图片左侧的距离 */
	}

	.neir-ziti {
			width: 1700rpx;
			height: 160rpx;
			/* border: 2px solid pink; */
			opacity: 0;
			position: relative;
			/* left: -100%; */
			top: 1px;
				margin-left: 5.5vw;
			animation: fadeInLeft 2s ease-in-out forwards;
			background: -webkit-linear-gradient(#f7edc4, #ffffff);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
			font-size: 17px;
			/* transform: rotate(90deg); */
		}
	
		@keyframes fadeInLeft {
					from {
						opacity: 0;
						top: 1px;
					}
			
					to {
						opacity: 1;
						top: -3px;
					}
				}
	

	.shuishang-imgae{
		width: 55vw;
		height: 4vw;
		position: absolute;
		/* border: 2px solid blue; */
		transform: scale(1);
		top: 57vh;
		/* 根据需要调整距离第一个图片顶部的距离 */
		right: 4vw;
		/* 根据需要调整距离第一个图片左侧的距离 */
		animation: shuishang 2s ease-in-out forwards;
	}
	
	@keyframes shuishang {
		from {
			opacity: 1;
			right: -100vw;
		}
	
		to {
			opacity: 1;
			right: 4vw;
		}
	}
	
	.yuanlai-image{
		width: 38vw;
		height: 4vw;
		position: absolute;
		/* border: 2px solid blue; */
		transform: scale(1);
		top: 45vh;
		/* 根据需要调整距离第一个图片顶部的距离 */
		right: 4vw;
		/* 根据需要调整距离第一个图片左侧的距离 */
		animation: yuanlai 2s ease-in-out forwards;
	}
	@keyframes yuanlai {
		from {
					opacity: 1;
					right: -100vw;
				}
			
				to {
					opacity: 1;
					right: 4vw;
				}
	}
	.fullscreen-container {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.fullscreen-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		/* border: 2px solid blue; */
		/* transform: scale(2.2); */
	}

	.toubu-image {
					width: 16vw;
					height: 10vh;
				position: absolute;
				/* border: 2px solid blue; */
				/* transform: rotate(90deg) scale(2.2); */
				top: 0px;
				/* 根据需要调整距离第一个图片顶部的距离 */
				left: 42vw;
				/* 根据需要调整距离第一个图片左侧的距离 */
			}

	.baibian-image {
			width: 31vw;
			height: 90vh;
			position: absolute;
			/* transform: rotate(90deg); */
			/* bottom: 520px; */
			/* 根据需要调整距离第一个图片顶部的距离 */
			top: 50px;
			left: 0.9vw;
		}

	.duihuakuang {
				width: 100vw;
				height: 30vh;
				position: absolute;
				/* border: 2px solid pink; */
				background-color: rgba(0, 0, 0, 0.4);
				top: 71vh;
				left: 0px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: flex-start;
				padding-left: 10px;
			}
	.cxkuang {
				width: 80px;
				height: 25px;
				position: absolute;
				/* border: 2px solid pink; */
				background-color: rgba(0, 0, 0, 0.5);
					top: 64vh;
					left: 6vw;
				/* transform: rotate(90deg); */
				
				text-align: center;
				
				}
</style>